<template>
	<view class="">
		<view class="goBack">
			<text class="gobackText" @click="goBack">
				<uni-icons type="left" size="18" color="#3E89FA"></uni-icons>
				返回 </text>
		</view>
		<view class="goods_groupon view-router">
			<view class="banner">
				<div class="title">
					新品首发
				</div>
			</view>
			<view class="feed">
				<!-- 循环渲染商品列表 -->
				<view class="van-card" v-for="item in swiperList" :key="item.id" @click="wyJumpWy(item.id)">
					<view class="van-card__header">
						<view class="">
							<view class="van-card__thumb">
								<!-- 动态绑定图片地址 -->
								<image class="van-card__thumbpic" :src="item.picUrl" mode=""></image>
							</view>
						</view>
						<view class="van-card__content">
							<view class="">
								<view class="van-card__title">
									<!-- 动态绑定商品简介 -->
									{{ item.brief }}
								</view>
								<view class="van-card__desc">
									<!-- 动态绑定商品名称 -->
									{{ item.name }}
								</view>
							</view>
							<view class="">
								<view class="van-card__price">
									<span class="siezese"> ¥</span>
									<!-- 动态绑定零售价 -->
									<span class="siezeone"> {{ item.retailPrice }}.</span>

								</view>
								<view class="van-card__origin-price">
									￥
									<!-- 动态绑定原价 -->
									{{ item.counterPrice }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="feed">
					<view class="van-list__finished-text">
						没有更多了
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		get
	} from '@/lib/http.js';

	export default {
		data() {
			return {
				// 初始化轮播图列表数据为空数组
				swiperList: []
			};
		},
		onLoad() {
			// 页面加载时获取轮播数据
			this.fetchSwiperList();
		},
		methods: {
			wyJumpWy(prodid){
				// 将 val 转换为 JSON 字符串
				const valStr = encodeURIComponent(JSON.stringify(prodid));
				uni.navigateTo({
					url: `/pages/detail/detail?prodid=${valStr}`
				});
			},
			three(id) {
				// 这里可以添加点击子商品的逻辑
				console.log('点击了子商品，id:', id);
				uni.navigateTo({
					url: `/pages/threePage/threePage?id=${id}`
				});
			},
			goBack() {
				uni.navigateBack({
					// 返回层级  如果层级没有那么多就直接跳到首页
					delta: 1
				});
			},
			fetchSwiperList() {
				// 使用 get 方法发起请求
				get('/wx/goods/list?isNew=true&page=1&limit=10')
					.then((response) => {
						const data = response.data;
						// 检查返回的数据中是否存在 data 和 list 字段
						if (data && data.data && data.data.list) {
							// 更新轮播列表数据
							this.swiperList = data.data.list;
							console.log(this.swiperList, '轮播图');
						} else {
							console.error('返回的数据格式错误');
							uni.showToast({
								title: '数据格式错误',
								icon: 'none'
							});
						}
					})
					.catch((error) => {
						console.error('请求失败:', error);
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					});
			},
		},
	};
</script>

<style>
	/* 引入外部样式文件 */
	@import './new.css';
</style>